<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>华为商城</title>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>华为商城</title>
    <link rel="stylesheet" href="css/bootstrap-3.1.1.min.css"/>
    <link rel="stylesheet" href="css/blink4.css"/>
    <link rel="stylesheet" href="css/blink.css"/>
    <link rel="stylesheet" href="css/word.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/time.js"></script>
    <style>

        /*chrome浏览器 去除滚动条*/
        html {
            -ms-overflow-style: none;
            overflow: -moz-scrollbars-none;
        }

        html::-webkit-scrollbar {
            width: 0;
        }

        .imgStyle {
            cursor: grab;
            transition: all 1.8s;
        }

        .imgStyle:hover {
            transform: scale(1.75); /*放大1.75倍*/
            opacity: 0.7; /*透明度30%*/
        }

        li:last-child {
            right: -500px;
        }

        .changeRed {
            color: red;
        }

        .play {
            font-size: 20px;
            font-weight: bold;
        }

        .p_title {
            font-family: 'Lucida Console', 'Courier New', monospace;
        }

        ul {
            list-style: none;
        }

        /*去除链接样式 */
        a:link {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        a:active {
            text-decoration: none;
        }

        h1 {
            display: inline-block;
        }

        .goods {
            width: 50%;
            /*text-align: center;
            margin: 50px auto;*/
        }

        .goods h1 {
            animation: myfirst 2s infinite;
        }

        @keyframes myfirst {
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(0px, -10px);
            }
            100% {
                transform: translate(0px, 0px);
            }
        }

        table {
            margin-top: 10px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            overflow: hidden;
        }

        /*返回顶部固定*/
        #return {
            width: 80px;
            height: 38px;
            position: fixed;
            top: 240px;
            right: 55px;
            _position: absolute;
            _top: expression(eval(document.documentElement.scrollTop) );
        }

        /*抽奖动画文字旋转*/
        .icon-over {
            width: 45px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            border: 1px solid #EF784B;
            color: #EF784B;
            font-size: 12px;
            border-radius: 50%;
            transform: rotate(-30deg);
            ｝
    </style>
</head>
<body>

<div class="container">
    <!--导航栏-->
    <ul class="nav nav-tabs play">
        <li><a href="index.jsp">首页</a></li>
        <li><a href="#hot1">新品上市</a></li>
        <li><a href="#hot2">热销单品</a></li>
        <li><a href="#hot3">优品推荐</a></li>
        <li><span id="clock" style="color:#00c;font-size:18px;"></span></li>
    </ul>

    <!-- 登录模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <br><br><br>
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">登录华为商城</h4>
                </div>
                <form class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="uname" class="col-md-2 control-label">用户名</label>
                            <div class="col-md-8">
                                <input type="text" id="username" name="username" class="form-control"
                                       placeholder="请输入用户名"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="upwd" class="col-md-2 control-label">密码</label>
                            <div class="col-md-8">
                                <input type="password" id="password" name="password" class="form-control"
                                       placeholder="请输入密码"/>
                            </div>
                        </div>
                        <br>

                        <div><h4 style="color:blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;测试账号为&nbsp;"xyc,xyc123"</h4>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="submit_btn">登录</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- 注册模态框 -->
    <div class="modal fade" id="myModal_res" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_res"
         aria-hidden="true">
        <div class="modal-dialog">
            <br><br><br>
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel_res">注册华为账号</h4>
                </div>
                <form class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="uname" class="col-md-2 control-label">账户名</label>
                            <div class="col-md-8">
                                <input type="text" id="username_res" name="username" class="form-control"
                                       placeholder="请输入账户名"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="upwd" class="col-md-2 control-label">密码</label>
                            <div class="col-md-8">
                                <input type="password" id="password_res" name="password" class="form-control"
                                       placeholder="请输入密码"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="upwd" class="col-md-2 control-label">确认密码</label>
                            <div class="col-md-8">
                                <input type="password" id="password_res2" name="password" class="form-control"
                                       placeholder="确认密码"/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="res_btn">注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <br>
    <br>
    <div style="background-color:#F0F8FF;border-radius:20px;">
        <br>
        <div class="container">

            <div class="col-md-2"><a href="#" style="color:darkblue;">华为手机换新电池说明</a></div>
            <div class="col-md-6" style="font-size:15px;">
                <div class="col-md-2"><a href="#">企业购</a></div>
                <div class="col-md-2"><a href="#">会员领券</a></div>
                <div class="col-md-2"><a href="#">以旧换新</a></div>
                <div class="col-md-2"><a href="#">P40系列</a></div>
                <div class="col-md-2"><a href="#">华为数码</a></div>
                <div class="col-md-2"><a href="#">智能家居</a></div>
            </div>
            <div class="col-md-2" style="font-size:18px;font-weight:bold;margin-left:5px;" id="loginSuccess">
                <a href="#">
                    <btn class="btn btn-primary" data-toggle="modal" data-target="#myModal">登录</btn>
                    &nbsp;&nbsp;<a href="#">
                    <btn class="btn btn-danger" data-toggle="modal" data-target="#myModal_res">注册</btn>
            </div>
        </div>
        <br>
    </div>

    <!--新品上市-->
    <br>
    <div class="goods">
        <h1 id="hot1" class="p_title">新品上市&nbsp;<a href="#"><span
                class="glyphicon glyphicon-tree-conifer"></span></a></h1>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="vmail/1.png" alt="HUAWEI" style="width:280px;height:192px;cursor:grab;">
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="imgs/p40/20.png" alt="HUAWEI" style="width:280px;height:192px;cursor:grab;">
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="vmail/3.png" alt="HUAWEI" style="width:280px;height:192px;cursor:grab;">
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="vmail/4.png" alt="HUAWEI" style="width:280px;height:192px;cursor:grab;">
            </div>
        </div>
    </div>

    <!--热销单口-->
    <br>
    <div class="goods">
        <h1 id="hot2" class="p_title">热销单品&nbsp;<a href="#"><span
                class="glyphicon glyphicon-tree-deciduous"></span></a></h1>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="vmail/5.png" alt="HUAWEI" style="width:185px;height:200px;" class="imgStyle"><br>
                <p class="text-center colorful ovh">FreeBuds Pro</p>
                <p class="text-center colorful ovh">主动降噪,人声透传,快充长续航</p>
                <p class="text-center changeRed">￥1099</p>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="imgs/p40/25.png" alt="HUAWEI" style="width:185px;height:200px;" class="imgStyle"><br>
                <p class="text-center blink">舒华 E3简约时尚智能跑步机</p>
                <p class="text-center blink">全面屏跑台 支持HUAWEI HiLink</p>
                <p class="text-center changeRed">￥1899</p>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="vmail/skg.png" alt="HUAWEI" style="width:185px;height:200px;" class="imgStyle"><br>
                <p class="text-center colorful ovh">SKG颈椎按摩仪</p>
                <p class="text-center colorful ovh">TENS+EMS双脉冲,深度缓解颈部疲劳</p>
                <p class="text-center changeRed">￥469</p>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="imgs/p40/21.png" alt="HUAWEI" style="width:185px;height:200px;" class="imgStyle"><br>
                <p class="text-center blink">小熊智能养生壶</p>
                <p class="text-center blink">APP远程控制,28种菜单选择</p>
                <p class="text-center changeRed">￥269</p>
            </div>
        </div>
    </div>

    <!--优品推荐-->
    <br>
    <div class="goods" style="display:inline;"><h1 id="hot3" class="p_title">优品推荐&nbsp;<a href="#"><span
            class="glyphicon glyphicon-hand-right"></span></a></h1></div>

    <br>
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <a href="p40pro+.html"><img src="vmail/9.png" alt="HUAWEI" style="width:185px;height:200px;"
                                            class="imgStyle"></a><br>
                <p class="text-center blink">HUAWEI P40 Pro+ 5G</p>
                <p class="text-center blink">纳米微晶工艺,5000万超感知俫卡五摄</p>
                <p class="text-center changeRed">￥7888</p>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="vmail/11.png" alt="HUAWEI" style="width:185px;height:200px;" class="imgStyle"><br>
                <p class="text-center colorful ovh">YESOUL野小兽智能动感单车M1</p>
                <p class="text-center colorful ovh">HUAWEI HiLink远程控制</p>
                <p class="text-center changeRed">￥899</p>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="imgs/p40/29.png" alt="HUAWEI" style="width:185px;height:200px;" class="imgStyle"><br>
                <p class="text-center blink">FreeLace Pro</p>
                <p class="text-center blink">双重主动降噪,24小时长续航</p>
                <p class="text-center changeRed">￥549</p>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="imgs/p40/23.png" alt="HUAWEI" style="width:185px;height:200px;" class="imgStyle"><br>
                <p class="text-center colorful ovh">FreeBuds 4i</p>
                <p class="text-center colorful ovh">环境音透传,10小时连续播放</p>
                <p class="text-center changeRed">￥499</p>
            </div>
        </div>
    </div>

    <!--新-->
    <!--    <br>
        <img src="imgs/p40/30.png" alt="HUAWEI" style="width:200px;height:200px;" >-->

</div>
<br><br><br>
<div style="background-color:#F0F8FF;width:80%;border-radius:20px;margin:0 auto;">
    <!--<canvas id="canvas"></canvas>-->
    <div class="container" style="font-size:20px;">
        <br>
        <div class="col-md-3"><span><a href="#">百强企业 品质保证</a></span></div>
        <div class="col-md-3"><span><a href="#">7天退货 15天换货</a></span></div>
        <div class="col-md-3"><span><a href="#">48元起免运费</a></span></div>
        <div class="col-md-3"><span><a href="#">2000家服务店 全国联保</a></span></div>
    </div>
    <br>
    <div class="container">
        <div class="col-md-2">
            购物相关
            <table>
                <tr>
                    <td><a href="#">购物指南</a></td>
                </tr>
                <tr>
                    <td><a href="#">配送方式</a></td>
                </tr>
                <tr>
                    <td><a href="#">支付方式</a></td>
                </tr>
                <tr>
                    <td><a href="#">常见问题</a></td>
                </tr>
            </table>
        </div>
        <div class="col-md-2">
            保修与退换货
            <table>
                <tr>
                    <td><a href="#">保修政策</a></td>
                </tr>
                <tr>
                    <td><a href="#">退换货政策</a></td>
                </tr>
                <tr>
                    <td><a href="#">保修状态查询</a></td>
                </tr>
                <tr>
                    <td><a href="#">配件防伪查询</a></td>
                </tr>
            </table>
        </div>
        <div class="col-md-2">
            维修与技术支持
            <table>
                <tr>
                    <td><a href="#">服务店</a></td>
                </tr>
                <tr>
                    <td><a href="#">预约维修</a></td>
                </tr>
                <tr>
                    <td><a href="#">手机寄修</a></td>
                </tr>
                <tr>
                    <td><a href="#">备件价格查询</a></td>
                </tr>
                <tr>
                    <td><a href="#">上门服务</a></td>
                </tr>
            </table>
        </div>
        <div class="col-md-2">
            特色服务
            <table>
                <tr>
                    <td><a href="#">防伪查询</a></td>
                </tr>
                <tr>
                    <td><a href="#">补购政策</a></td>
                </tr>
                <tr>
                    <td><a href="#">以旧换新</a></td>
                </tr>
                <tr>
                    <td><a href="#">礼品包装</a></td>
                </tr>
            </table>
        </div>
        <div class="col-md-2">
            关于我们
            <table>
                <tr>
                    <td><a href="#">公司介绍</a></td>
                </tr>
                <tr>
                    <td><a href="#">华为商城简介</a></td>
                </tr>
                <tr>
                    <td><a href="#">商家中心</a></td>
                </tr>
                <tr>
                    <td><a href="#">意见反馈</a></td>
                </tr>
            </table>
        </div>
        <div class="col-md-2">
            全国客服热线
            <table>
                <tr>
                    <td><span style="color:red;font-size:17px;">950805</span></td>
                </tr>
                <tr>
                    <td>7*24小时客服热线</td>
                </tr>
                <tr>
                    <td><a href="service.jsp">
                        <btn class="btn btn-default btn-lg" style = "color:#FF69B4;">在线客服</btn>
                    </a></td>
                </tr>
            </table>
        </div>
    </div>
    <br>
</div>

<br>

<div id="return">
    <a href="javascript:scroll(0,0)">
        <btn class="btn btn-info btn-lg" style="opacity: 0.77;cursor:grab;">
            <span class="glyphicon glyphicon-arrow-up"></span>返回顶部
        </btn>
    </a>
</div>

<a href="lottery.html">
    <div class="mydiv div_rotate">
        抽奖
    </div>
</a>


<div id="demo" style="width:360px;height:187px;background:antiquewhite;
display: none;border-radius:16px;margin-left:39%;text-align: center;">
    <br>
    <p>前端:jquery+bootstrap</p>
    <p>数据库:mysql</p>
    <p>后台:spring+mybatis</p>
    <p>作者:2791486247@qq.com</p>
    <div>
        <a href="javascript:scroll(1200,1200)" type="button" class="btn btn-primary" id="close">知道了</a>
    </div>
</div>
<br>

<!--底部声明-->
<div style="bottom:0">

    <button type="button" class="btn btn-default demojs" style="margin-left:47.5%;" title="HUAWEI">
        华为商城
    </button>

    <br>
    <p></p>
    <p style="text-align:center;font-size:17px;color:black;"><a href="https://beian.miit.gov.cn/">苏ICP备2021007796号</a>
    </p>
</div>

<script type="text/javascript">
    /*登录判断*/
    $("#submit_btn").click(function () {
        var name = $("#username").val()
        var pwd = $("#password").val()
        if (name == null || pwd == null || name == "" || pwd == "") {
            alert('用户名或密码为空')
        } else if (name == "xyc" && pwd == "xyc123") {

            $("#loginSuccess").after("<div class='col-md-2' style='font-size:18px;font-weight:bold;margin-left:5px;'>\n" +
                "<a href='personal.jsp'><btn class = 'btn btn-success'>个人中心</btn>\n</div>");
            $("#loginSuccess").hide();
            /*$('#myModal1').modal('hide');*/
            /*$(".modal fade").hide();*/
        } else {
            alert('用户名或密码错误')
        }
    });


    $(".demojs").click(function () {
        $("#demo").show(200)
    });

    $("#close").click(function () {
        $("#demo").hide()
    });

</script>
</body>
</html>

<!--2021 0329 00:40版本-->